<template>
  <div class="app-container">
    <div class="message">
     <div><h1>合同名称:{{form.contractName }}  <span> &emsp; </span> 合同编号：{{form.contractNo}}</h1></div>
      <div>
        <el-form
          :inline="true"
          ref="elForm"
          type="text"
          :model="form"
          size="medium"
          label-width="150px"
          style="margin: 20px 0px 0 10px"
        >
         
          <el-form-item label="创建人:">
            <!-- <span> {{拿到数据渲染}} </span> -->
            <span>{{ form.createBy }}</span>
          </el-form-item>

          <el-form-item label="创建时间:">
            <span>{{ form.createTime }}</span>
          </el-form-item>
          <el-form-item label="最后修改人:">
            <span>{{ form.updateBy }}</span>
          </el-form-item>
          <el-form-item label="修改时间:">
            <span>{{ form.updateTime }}</span>
          </el-form-item>
        </el-form>

        <div class="remove">
          <el-popover placement="top" width="160" v-model="visible">
            <el-button
              style="margin-top: 0px"
              slot="reference"
              @click="handleDelete"
              >删除</el-button
            >
          </el-popover>
        </div>
      </div>
    </div>

    <div><h1>基础信息</h1></div>
    <div>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="订单类型:" prop="orderType">
              <el-select
                v-model="form.orderType"
                placeholder="请选择订单类型"
                :style="{ width: '40%' }"
              >
                <el-option
                  v-for="dict in dict.type.project_order_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合同名称:" prop="contractName">
              <el-input
                :style="{ width: '40%' }"
                v-model="form.contractName"
                placeholder="请输入合同名称"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="经办人:" prop="operator">
              <el-input
                :style="{ width: '40%' }"
                v-model="form.operator"
                placeholder="请输入经办人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合同编号:" prop="contractNo">
              <el-input
                :style="{ width: '40%' }"
                v-model="form.contractNo"
                placeholder="请输入合同编号"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8"
            ><el-form-item label="结构量:" prop="structCount">
              <el-input
              type="number"
              control-position="right"
                :style="{ width: '40%' }"
                v-model="form.structCount"
                placeholder="请输入结构量"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8"> </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="签订日期:" prop="signDate">
              <el-date-picker
                :style="{ width: '40%' }"
                clearable
                v-model="form.signDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择签订日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8"
            ><el-form-item label="交付日期:" prop="deliverDate">
              <el-date-picker
                :style="{ width: '40%' }"
                clearable
                v-model="form.deliverDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择交付日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="对方单位:" prop="oppositeCompany">
              <el-input
                :style="{ width: '40%' }"
                v-model="form.oppositeCompany"
                placeholder="请输入对方单位"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合同地址:" prop="contractAddress">
              <el-input
                :style="{ width: '40%' }"
                v-model="form.contractAddress"
                placeholder="请输入合同地址"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="是否预付款:" prop="isPay">
              <el-col :span="3">
                <el-radio v-model="radio" label="1" @click.native="moneyYes"
                  >是
                </el-radio>
              </el-col>
              <el-col :span="11" v-show="moneyShow">
                <el-input
                  type="number"
                  v-model="num"
                  controls-position="right"
                  :precision="2"
                  :step="0.1"
                  :min="1"
                  :style="{ width: '70%' }"
                ></el-input>
                <span style="margin-left: 20px; margin-right: 20px">万元</span>
              </el-col>
              <el-col :span="2">
                <el-radio v-model="radio" label="2" @click.native="moneyNo"
                  >否</el-radio
                >
              </el-col>

              <!-- <el-input
                :style="{ width: '40%' }"
                v-model="form.isPay"
                placeholder="请输入是否预付款"
              /> -->
            </el-form-item>
          </el-col>
          <el-col :span="10"> </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="付款方式:" prop="payWay">
              <el-input
                :style="{ width: '40%' }"
                v-model="form.payWay"
                placeholder="请输入付款方式"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运输方式:" prop="transWay">
              <el-input
                :style="{ width: '40%' }"
                v-model="form.transWay"
                placeholder="请输入运输方式"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收款方式:" prop="collectWay">
              <el-input
                :style="{ width: '40%' }"
                v-model="form.collectWay"
                placeholder="请输入收款方式"
              /> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col>
            <el-form-item label="附件">
              <file-upload v-model="form.filePath" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 排版 -->

      <el-divider content-position="center">合同计划信息</el-divider>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['contract:ContractPlanInfo:add']"
            >新增</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="info"
            plain
            icon="el-icon-sort"
            size="mini"
            @click="toggleExpandAll"
            >展开/折叠</el-button
          >
        </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
      <!-- 表格 折叠 -->
     <el-table
        v-if="refreshTable"
        v-loading="loading"
        :data="ContractPlanInfoList"
        row-key="planId"
        :default-expand-all="isExpandAll"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column label="计划名称" prop="planName" />
        <el-table-column label="计划编号" align="center" prop="planId" />
        <el-table-column
          label="计划开始时间"
          align="center"
          prop="planBeginTime"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.planBeginTime, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="计划结束时间"
          align="center"
          prop="planEndTime"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.planEndTime, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['contract:ContractPlanInfo:edit']"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-plus"
              @click="handleAdd(scope.row)"
              v-hasPermi="['contract:ContractPlanInfo:add']"
              >新增子计划</el-button
            >
            <el-popover placement="top" width="160" v-model="visible">
              <p>这是一段内容这是一段内容确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible = false"
                  >取消</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  @click="handleDelete(scope.row)"
                  >确定</el-button
                >
              </div>
              <el-button
                slot="reference"
                size="mini"
                type="text"
                icon="el-icon-delete"
                >删除</el-button
              >
            </el-popover>

            <!-- <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['contract:ContractPlanInfo:remove']"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加 修改合同计划对话框 -->
       <el-dialog
        :title="title"
        :visible.sync="open"
        width="750px"
        append-to-body
      >
        <el-form ref="formT" :model="formT" :rules="rules" label-width="110px">
          <el-row :gutter="1">
            <el-col :span="11">
              <el-form-item label="计划名称：" prop="planName">
                <el-input
                  v-model="formT.planName"
                  placeholder="请输入计划名称"
                /> </el-form-item
            ></el-col>
            <el-col :span="11">
              <el-form-item label="计划编号：" prop="parentPlanId">
                <treeselect
                  v-model="formT.parentPlanId"
                  :options="ContractPlanInfoOptions"
                  :normalizer="normalizer"
                  placeholder="请选择父计划编号"
                /> </el-form-item
            ></el-col>
          </el-row>
          <el-row :gutter="1">
            <el-col :span="12">
              <el-form-item label="计划开始时间：" prop="planBeginTime">
                <el-date-picker
                  clearable
                  v-model="formT.planBeginTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择计划开始时间"
                >
                </el-date-picker> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="计划结束时间：" prop="planEndTime">
                <el-date-picker
                  clearable
                  v-model="formT.planEndTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择计划结束时间"
                >
                </el-date-picker> </el-form-item
            ></el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFormTabel">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancelset">取 消</el-button>
    </div>
  </div>
</template>

<script>
import {
  listContractInfo,
  getContractInfo,
  delContractInfo,
  addContractInfo,
  updateContractInfo,
} from "@/api/contract/ContractInfo";
import {
  listContractPlanInfo,
  getContractPlanInfo,
  delContractPlanInfo,
  addContractPlanInfo,
  updateContractPlanInfo,
} from "@/api/contract/ContractPlanInfo";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "ContractInfo",
  components: {
    Treeselect,
  },
  dicts: ["shipment_status", "project_order_type", "contract_status"],
  data() {
    return {
      formEidt: [],
      // 表格删除一行
      rowReove: {},
      // 表格提交
      formDare: {},
      // 是否付款
      moneyShow: true,
      openChange: "false ",
      num: 1,
      // 单选框
      radio: "1",

      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedContractPlanInfo: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 合同计划表格数据
      ContractPlanInfoList: [],
      beifenContractPlanInfoList: [],
      // 合同计划树选项
      ContractPlanInfoOptions: [],
      // 合同信息表格数据
      ContractInfoList: [],
      // 合同计划表格数据
      contractPlanInfoList: [],
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
      // 查询参数
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 合同编号时间范围
      daterangeSignDate: [],
      // 合同编号时间范围
      daterangeDeliverDate: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // contractNo: null,
        contractName: null,
        orderType: null,
        signDate: null,
        deliverDate: null,
        isPay: null,
        status: null,
        planName: null,
        parentPlanId: null,
        planBeginTime: null,
        planEndTime: null,
        contractNo: null,
      },
      // 表单参数
      form: {
        contractPlanInfoList: [],
        payMount: "",
        isPay: null,
        pageNum: 1,
        pageSize: 10,
        // contractNo: null,
        contractName: null,
        orderType: null,
        signDate: null,
        deliverDate: null,
        isPay: null,
        status: null,
        planName: null,
        parentPlanId: null,
        planBeginTime: null,
        planEndTime: null,
        contractNo: null,
      },
      formT: {
        planName: null,
        parentPlanId: null,
        planBeginTime: null,
        planEndTime: null,
        contractNo: null,
      },
      // 表单校验
      rules: {
         planName: [
          { required: true, message: "计划名称不能为空", trigger: "blur" },
        ],
        contractName: [
          { required: true, message: "合同名称不能为空", trigger: "blur" },
        ],
        orderType: [
          { required: true, message: "订单类型不能为空", trigger: "change" },
        ],
        structCount: [
          { required: true, message: "结构量不能为空,只能是数字", trigger: "blur" },
        ],
        oppositeCompany: [
          { required: true, message: "对方单位不能为空", trigger: "blur" },
        ],
        contractAddress: [
          { required: true, message: "合同地址不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    console.log(this.$route.query.id);
    getContractInfo(this.$route.query.id).then((res) => {
      this.form = res.data;
      this.ContractPlanInfoList = res.data.contractPlanInfoList;
      console.log();

      console.log("详情", res.data);
    });

    this.getList();
  },
  methods: {
    // 取消
    cancelset() {
      this.reset();
      const obj = {
        path: "/contract/ContractInfo",
        query: { t: Date.now(), pageNum: this.$route.query.pageNum },
      };
      this.$tab.closeOpenPage(obj);
    },
    // 提交按钮
    submitForm() {
      console.log("表格", this.ContractPlanInfoList);
      this.form.payMount = this.num;
      this.form.contractPlanInfoList = this.beifenContractPlanInfoList;
      this.form.isPay = this.radio;
      console.log(11111);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // this.form.contractPlanInfoList = this.contractPlanInfoList;
          if (this.form.id != null) {
            updateContractInfo(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
              const obj = {
                path: "/contract/ContractInfo",
                query: { t: Date.now(), pageNum: this.$route.query.pageNum },
              };
              this.$tab.closeOpenPage(obj);
            });
          } else {
            addContractInfo(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
              const obj = {
                path: "/contract/ContractInfo",
                query: { t: Date.now(), pageNum: this.$route.query.pageNum },
              };
              this.$tab.closeOpenPage(obj);
            });
          }
        }
      });

      console.log(222222);
    },
    //    单选框 隐藏 显示
    moneyYes() {
      this.moneyShow = true;
    },
    moneyNo() {
      this.moneyShow = false;
    },

    /** 查询合同子计划列表——不请求 */
    getList() {
      this.loading = true;

      this.ContractPlanInfoList = this.handleTree(
        this.beifenContractPlanInfoList,
        "planId",
        "parentPlanId"
      );
      this.loading = false;
    },
    /** 转换合同计划数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.planId,
        label: node.planName,
        children: node.children,
      };
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.formT.planName = null;
      this.formT.parentPlanId = null;
      this.formT.planBeginTime = null;
      this.formT.planEndTime = null;
      this.formT.contractNo = null;
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        contractNo: null,
        contractName: null,
        orderType: null,
        operator: null,
        structCount: null,
        signDate: null,
        deliverDate: null,
        oppositeCompany: null,
        contractAddress: null,
        isPay: null,
        payMount: null,
        payWay: null,
        transWay: null,
        collectWay: null,
        filePath: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null,
        status: null,
        comment: null,
        shipmentStatus: null,
      };
      this.ContractPlanInfoList = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    // resetQuery() {
    //   this.daterangeSignDate = [];
    //   this.daterangeDeliverDate = [];
    //   this.resetForm("queryForm");
    //   this.handleQuery();
    // },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */

    /** 查询合同计划下拉树结构 */
    getTreeselect() {
      this.ContractPlanInfoOptions = [];
      const data = { planId: 0, planName: "顶级节点", children: [] };
      data.children = this.handleTree(
        this.beifenContractPlanInfoList,
        "planId",
        "parentPlanId"
      );
      this.ContractPlanInfoOptions.push(data);
    },
    /** 表格新增按钮操作 */
    handleAdd(row) {
      this.formT.planName = null;
      this.formT.parentPlanId = null;
      this.formT.planBeginTime = null;
      this.formT.planEndTime = null;
      this.formT.contractNo = null;
      this.getTreeselect();
      if (row != null && row.planId) {
        this.formT.parentPlanId = row.planId;
      } else {
        this.formT.parentPlanId = 0;
      }
      this.open = true;
      this.title = "添加合同计划";
    },
    /** 表格展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTable = false;

      this.isExpandAll = !this.isExpandAll;
      this.$nextTick(() => {
        this.refreshTable = true;
      });
    },
    /**表格 修改按钮操作 */
    handleUpdate(row) {
      // console.log( "修改",row)
      this.open = true;
      this.formT = row;
    },

    /** 修改按钮操作 */
    // handleUpdate(row) {
    //   this.reset();
    //   const id = row.id || this.ids;
    // getContractInfo(id).then((response) => {
    //   this.form = response.data;
    //   this.contractPlanInfoList = response.data.contractPlanInfoList;
    //   this.open = true;
    //   this.title = "修改合同信息";
    // });
    // },
    /** 表格的提交按钮  已经好了*/
    submitFormTabel() {
       if (
        this.formT.planName === null ||
        this.formT.planName === undefined ||
        this.formT.planName === ""
      ) {
        return;
      }
      console.log(this.formT);
      var formDare = JSON.parse(JSON.stringify(this.formT));

      this.formT.planName = null;
      this.formT.parentPlanId = null;
      this.formT.planBeginTime = null;
      this.formT.planEndTime = null;
      this.formT.contractNo = null;
      if (
        formDare.planId === "" ||
        formDare.planId === undefined ||
        formDare.planId === null
      ) {
        formDare.planId = new Date().getTime();
        this.beifenContractPlanInfoList.push(formDare);
      } else {
        this.beifenContractPlanInfoList.map((item, index) => {
          if (formDare.planId === item.planId) {
            this.beifenContractPlanInfoList[index] = formDare;
          }
        });
      }
      this.getList();
      this.open = false;
      this.getTreeselect();
    },
    /** 表格 删除按钮操作 */
    handleDelete(row) {
      for (var i = 0; i < this.beifenContractPlanInfoList.length; i++) {
        if (this.beifenContractPlanInfoList[i].planId === row.planId) {
          this.beifenContractPlanInfoList.splice(i, 1);
          break;
        }
      }
      this.getList();
    },

    // 表格的 删除确认按钮
    /** 合同计划序号 */
    rowContractPlanInfoIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 合同计划添加按钮操作 */
    handleAddContractPlanInfo() {
      let obj = {};
      obj.planName = "";
      obj.parentPlanId = "";
      obj.planBeginTime = "";
      obj.planEndTime = "";
      this.contractPlanInfoList.push(obj);
    },
    /** 合同计划删除按钮操作 */
    handleDeleteContractPlanInfo() {
      if (this.checkedContractPlanInfo.length == 0) {
        this.$modal.msgError("请先选择要删除的合同计划数据");
      } else {
        const contractPlanInfoList = this.contractPlanInfoList;
        const checkedContractPlanInfo = this.checkedContractPlanInfo;
        this.contractPlanInfoList = contractPlanInfoList.filter(function (
          item
        ) {
          return checkedContractPlanInfo.indexOf(item.index) == -1;
        });
      }
    },
    /** 复选框选中数据 */
    handleContractPlanInfoSelectionChange(selection) {
      this.checkedContractPlanInfo = selection.map((item) => item.index);
    },
  },
};
</script>
<style lang="scss" scoped>
.dialog-footer {
  margin-top: 20px;
  text-align: center;
}
.message {
  margin-top: 10px;
  padding-left: 20px;
  width: 50%vh;
  height: 180px;
  margin-right: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  border: 1px solid gainsboro;
  border-radius: 1rem;

  span {
    font-size: 20px;
    margin-right: 120px;
  }
}
</style>
